<template>
  <div class="login-form-container">
    <h3 class="login-form-title">{{ t("login.resetPassword") }}</h3>
    <el-form ref="formRef" :model="model" :rules="rules" size="large" class="login-form">
      <!-- 用户名 -->
      <el-form-item prop="username" class="form-item">
        <el-input
          v-model.trim="model.username"
          :placeholder="t('login.username')"
          class="login-input"
        >
          <template #prefix>
            <el-icon class="login-icon"><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="form-item">
        <el-button type="primary" class="login-button" @click="submit">
          {{ t("login.resetPassword") }}
        </el-button>
      </el-form-item>
    </el-form>

    <div class="register-section">
      <el-text size="default" class="register-text">{{ t("login.thinkOfPasswd") }}</el-text>
      <el-link type="primary" underline="never" class="register-link" @click="toLogin">
        {{ t("login.login") }}
      </el-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import type { FormInstance } from "element-plus";

const { t } = useI18n();

const emit = defineEmits(["update:modelValue"]);
const toLogin = () => emit("update:modelValue", "login");

const model = ref({
  username: "",
});

const rules = computed(() => {
  return {
    username: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.username.required"),
      },
    ],
  };
});

const formRef = ref<FormInstance>();

const submit = async () => {
  await formRef.value?.validate();
  ElMessage.warning("开发中 ...");
};
</script>

<style lang="scss" scoped>
.login-form-container {
  width: 100%;
}

.login-form-title {
  text-align: center;
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--login-text-primary);
}

.login-form {
  .form-item {
    margin-bottom: 20px;
  }

  .login-input {
    :deep(.el-input__wrapper) {
      background: var(--login-input-bg);
      border: 1px solid var(--login-input-border);
      border-radius: 8px;
      transition: all 0.3s ease;
      box-shadow: none;

      &:hover {
        border-color: var(--login-primary-light);
      }

      &.is-focus {
        border-color: var(--login-input-focus-border);
        box-shadow: 0 0 0 2px rgba(0, 124, 198, 0.1);
      }
    }

    :deep(.el-input__inner) {
      color: var(--login-text-primary);
      font-size: 14px;
      height: 44px;

      &::placeholder {
        color: var(--login-text-secondary);
      }
    }

    :deep(.el-input__prefix) {
      color: var(--login-primary-color);
    }
  }

  .login-button {
    width: 100%;
    height: 44px;
    background: var(--login-primary-gradient);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;

    &:hover {
      background: var(--login-button-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 124, 198, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

.register-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--login-border-color);

  .register-text {
    color: var(--login-text-secondary);
    font-size: 14px;
  }

  .register-link {
    color: var(--login-link-color);
    font-size: 14px;
    font-weight: 500;

    &:hover {
      color: var(--login-link-hover);
    }
  }
}

.login-icon {
  color: var(--login-primary-color);
  font-size: 16px;
}
</style>
